<template>
	<view v-if="itemData.data.productList && itemData.data.productList.length > 0" class="drag optional" :style="{
      background: itemData.style.bgcolor,
      paddingLeft: itemData.style.paddingLeft * 2 + 'rpx',
      paddingRight: itemData.style.paddingLeft * 2 + 'rpx',
      paddingTop: itemData.style.paddingTop * 2 + 'rpx',
      paddingBottom: itemData.style.paddingBottom * 2 + 'rpx',
    }">
		<view class="diy-sharpproduct" :style="{
        background: itemData.style.background,
        borderTopLeftRadius: itemData.style.topRadio * 2 + 'rpx',
        borderTopRightRadius: itemData.style.topRadio * 2 + 'rpx',
        borderBottomLeftRadius: itemData.style.bottomRadio * 2 + 'rpx',
        borderBottomRightRadius: itemData.style.bottomRadio * 2 + 'rpx',
      }">
			<view class="sharpproduct-head d-b-c" :style="{
          backgroundImage: itemData.style.bgimage
            ? 'url(' + itemData.style.bgimage + ')'
            : '',
        }">
				<view class="left d-s-c">
					<view v-if="itemData.style.titleType == 1" class="name">{{
            itemData.params.title
          }}</view>
					<image v-if="itemData.style.titleType == 2" class="titleImg" :src="itemData.style.titleImage"
						mode="heightFix"></image>
				</view>
				<view @click="gotoList" class="right white d-c-c" style="line-height: 1; height: 100%" :style="{
            color: itemData.style.moreColor,
            fontSize: itemData.style.moreSize * 2 + 'rpx',
          }">
					{{ itemData.params.more }}
					<text class="icon iconfont icon-you" :style="{
              color: itemData.style.moreColor,
              fontSize: '22rpx',
            }"></text>
				</view>
			</view>
			<view class="product-list column__3">
				<view class="product-item" :style="{
            background: itemData.style.productBgColor,
            borderTopLeftRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderTopRightRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderBottomLeftRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
            borderBottomRightRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
          }" v-for="(item, index) in itemData.data.productList" :key="index"
					@click="gotoDetail(item.bargainProductId)">
					<!-- 两列三列 -->
					<view class="product-cover">
						<image :style="{
                borderRadius: itemData.style.productImgRadio * 2 + 'rpx',
              }" :src="item.filePath" mode="aspectFit"></image>
						<view :style="{
                color: itemData.style.salesColor,
                background: itemData.style.bgSales,
              }" v-if="itemData.style.productSales == 1" class="product-sales">
							已砍{{ item.totalSales }}人
						</view>
					</view>
					<view class="product-info p-0-20">
						<view class="price ww100 f24 tc">
							<view class="f24 tc text-ellipsis" v-if="itemData.style.productName == 1" :style="{
                  color: itemData.style.productNameColor,
                }">
								{{ item.productName }}
							</view>
							<view class="f28 tc" v-if="itemData.style.productPrice == 1" :style="{
                  color: itemData.style.productPriceColor,
                }">
								¥{{ item.bargainPrice }}
							</view>
							<view v-if="itemData.style.productLineprice == 1" :style="{
                  color: itemData.style.productLineColor,
                }" class="f24 text-d-line">
								¥{{ item.productPrice }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: ["itemData"],
		methods: {
			scroll(e) {},

			/*跳转列表*/
			gotoList() {
				let url = "/pagesPlus/bargain/list/list";
				this.gotoPage(url);
			},

			/*跳转详情*/
			gotoDetail(e) {
				let url = "/pagesPlus/bargain/detail/detail?bargainProductId=" + e;
				this.gotoPage(url);
			},
		},
	};
</script>

<style lang="scss">
	.diy-sharpproduct {
		overflow: hidden;
		// padding: 10px;
	}

	.diy-sharpproduct .product-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 22rpx;
		padding-left: 20rpx;
		box-shadow: 0px 8rpx 4rpx 0px rgba(6, 0, 1, 0.03);
		padding-bottom: 20rpx;
		overflow-x: auto;
	}

	.diy-sharpproduct .display__list .column__3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
	}

	.diy-sharpproduct .product-list.column__3 .product-item {
		width: 198rpx;
		margin-right: 28rpx;
		padding-bottom: 10rpx;
		overflow: hidden;
	}

	.diy-sharpproduct .product-list.column__3 .product-item:last-child {
		margin-right: 0;
	}

	.diy-sharpproduct .product-list.column__3 .product-item .product-cover {
		width: 198rpx;
		height: 198rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 12rpx;
	}

	.diy-sharpproduct .product-list.column__3 .product-item .product-cover image {
		width: 198rpx;
		height: 198rpx;
	}

	.diy-sharpproduct .sharpproduct-head {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		margin: 0;
		padding: 0 20rpx;
		background-repeat: no-repeat;
		background-size: cover;
		line-height: 1;
	}

	.sharpproduct-head .name {
		font-size: 36rpx;
		font-weight: bold;
		width: 200rpx;
	}

	.sharpproduct-head .datetime {
		margin-left: 40rpx;
	}

	.sharpproduct-head .datetime>text {
		display: inline-block;
	}

	.sharpproduct-head .datetime .text {
		padding: 0 4rpx;
	}

	.diy-sharpproduct .product-list .barginbtns {
		width: 200rpx;
		background: linear-gradient(90deg, #ff4545 0%, #f6220c 100%);
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		text-align: center;
		color: #ffffff;
		margin: 0 auto;
		border-radius: 26rpx;
	}

	.left .datetime {
		padding: 2rpx;
		border-radius: 400rpx 0 400rpx 400rpx;
		border: 1px solid #eeeeee;
		padding-right: 8rpx;
	}

	.left .datetime .daybox {
		padding: 0 20rpx;
		border-radius: 400rpx;
		margin-right: 10rpx;
	}

	.titleImg {
		width: auto;
		height: 88rpx;
	}

	.product-info {
		height: auto;
	}

	.product-sales {
		font-size: 24rpx;
		text-align: center;
		width: 162rpx;
		line-height: 2;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
</style>